<template>
    <section class="content">
        <navbar :title="$t('h_title.zizhufuwu')" :right_show="false" :type="1" ref="navbar"></navbar>
        <section class="nav">

            <router-link to="/active">
                <img src="~path_img/2.png" alt="">
                 {{$t('bangzhuzhongxin.nav[0]')}}
            </router-link>
           <!-- <a href="javascript:;" @click="kefu">
                <img src="~path_img/3.png" alt="">
                {{$t('bangzhuzhongxin.nav[1]')}}
            </a> -->
			<router-link to="/serviceCenter">
			   <img src="~path_img/3.png" alt="">
			   {{$t('bangzhuzhongxin.nav[1]')}}
			</router-link>
            <router-link to="/exchange">
                <img src="~path_img/4.png" alt="">
                {{$t('bangzhuzhongxin.nav[2]')}}
            </router-link>
            <router-link to="/person">
                <img src="~path_img/5.png" alt="">
                {{$t('bangzhuzhongxin.nav[3]')}}
            </router-link>

            <router-link :to="'/zizhufuwu_list?id=' + index" v-for="(item,index) in list" >
                <img :src="require(''+'@/assets/images/'+ index +'.png'+'')" alt="">
                {{item}}
            </router-link>


        </section>
        <bottom></bottom>
        <kefu :show="kefu_show" :s_show="s_show" @fun_kefu_x="fun_kefu_x"></kefu>
    </section>
</template>

<script>
    import navbar from "@/components/navbar"
    import Bottom from "@/components/bottom"
    import kefu from '@/components/kefu';
    export default {
        name: "zizhufuwu",
        data() {
            return {
                list: [],
                kefu_show: false,
                s_show: false
            }
        },
        components: {
            navbar,
            Bottom,
            kefu
        },
        mounted() {
            this.load()
        },
        methods: {
            kefu(){
                this.kefu_show = true
                this.s_show = true
            },
            load() {
                this.$https.fetchGet('/m/article_type',{}).then(res => {
                    this.list = res.data.article
                })
            },
            fun_kefu_x() {
                this.s_show = false
                this.kefu_show = false
            }
        }
    }
</script>

<style scoped lang="less">
.nav{
    display: flex;
    flex-wrap: wrap;
    padding: .2rem .3rem;
    justify-content: space-between;
    a{
        background: linear-gradient(#2c3134, #24292c);
        width: 49%;
        border-radius: .1rem;
        color: #fff;
        font-size: .4rem;
        display: flex;
        align-items: center;
        height: 1.3rem;
        margin-bottom: .3rem;
        padding-left: .4rem;
        img{
            width: .5rem;
            margin-right: .3rem;
        }
    }
}
</style>
